<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery ASelect Plugin Demo</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="./ySelect.css" rel="stylesheet" type="text/css">
    <script src="./ySelect.js"></script>
</head>
<body>
    <div style="font-size: 18px; color: brown;">下载代码有完整示例 如需要帮助探讨请加QQ: 1546744970</div>
    <div>如果改为单选 去掉 multiple="multiple" 属性</div>
    <div class="container">
        <select id='m2' class="demo1" multiple="multiple"></select>
        <button id="query" class="btn btn-primary btn-sm">查询值（有）</button>
        <button id="query1" class="btn btn-primary btn-sm">查询值（无）</button>
    <button id="current" class="btn btn-primary btn-sm">查看值</button>
    </div>
<input type="checkbox"/>
</body>
    <script>
        $(function() {
                $('.demo1').ySelect({
                    placeholder: '请选择',
                    searchText: '搜索',
                    showSearch: true,
                    numDisplayed: 4,
                    overflowText: '已选中 {n}项',
                    isCheck:false,
                    callback: function(data){
                        console.log(11, data)
                        console.log(22,$("#m2").ySelectedValues());
                    }
                });
    
            $("#current").click(function(){
                console.log($("#m2").ySelectedValues());
            });
            $("#query").click(function(){
                let data = [
                    {
                        id: '1',
                        name: '加多宝凉茶'
                    },
                    {
                        id: '2',
                        name: '饮料'
                    },
                    {
                        id: '3',
                        name: '太太乐鸡精'
                    },
                    {
                        id: '4',
                        name: '气质女人1'
                    },
                    {
                        id: '5',
                        name: '气质女人01'
                    },
                    {
                        id: '6',
                        name: '气质女人02'
                    },
                    {
                        id: '7',
                        name: '气质女人03'
                    },
                    {
                        id: '16',
                        name: '直男2'
                    },
                    {
                        id: '17',
                        name: '直男3'
                    },
                    {
                        id: '18',
                        name: '气质女人5'
                    }
                ]
                $.each(data, function (i, item) {
                    $(".demo1").append("<option value=" + item.id + ">"+ item.name + "</option>")
                })
                $(".demo1").reload()
            });
            $("#query1").click(function(){
                let data = []
                $.each(data, function (i, item) {
                    $(".demo1").append("<option value=" + item.id + ">"+ item.name + "</option>")
                })
                $(".demo1").reload()
            });
        });
    </script>
</html>
